<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width:100px;height:100px;position: absolute;left:0;top:0;background: red;}  
        .box2{width:100px;height:100px;position: absolute;left:0;top:110px;background: green;}  
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
<script src="../jquery.js"></script>
<script>
    $(".box1").click(function(){

        // $(".box1").animate({
        //     left:500
        // },()=>{
        //     $(".box1").css("background","yellow")
        // })

        // $(".box1").animate({
        //     left:500
        // }).css("background","yellow")
        
        // $(".box1").animate({
        //     left:500
        // }).animate({
        //     top:400
        // })

        // $(".box1").animate({
        //     left:500
        // });
        // $(".box2").animate({
        //     top:400
        // });
        
        // $(".box1").animate({
        //     left:500
        // });
        // $(".box1").animate({
        //     top:400
        // });
            
        $(".box1").animate({
            top:400,
            left:500,
            width:300,
            height:30
        });
        
    })
</script>
</html>